<template>
  <div class="main">
    <div class="flex align-flex-start">
      <div class="left w-1/2">
        <articleList></articleList>
      </div>
      <div class="arrow-right"></div>
      <div class="right w-1/2 h-full">
        <div class="onlyoffice-container h-full">
          <div id="onlyoffice-editor" class="editor h-full w-full"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import articleList from '@/components/articleList.vue'
import { onMounted } from 'vue'
// 引入.env文件变量
const onlyOfficeUrl = import.meta.env.VITE_API_ONLYOFFICE_URL
let docEditor = null
const initOnlyOffice = () => {
  // 初始化 OnlyOffice 配置
  const config = {
    document: {
      fileType: 'docx', // 文件类型
      key: 'docx', // 文件唯一标识
      title: '文档标题', // 文档标题
      url: 'http://180.76.177.100:10101/blank.docx', // 文档地址
      info: {
        author: '作者', // 作者
        created: '2022-01-01', // 创建时间
        modified: '2022-01-01', // 修改时间
        modifiedBy: '修改者' // 修改者
      }
    },
    editorConfig: {
      callbackUrl: 'http://180.76.177.100:3000/save', // 回调地址
      lang: 'zh-CN', // 语言
      mode: 'edit', // 编辑模式
      permissions: {
        comment: true, // 允许评论
        download: true, // 允许下载
        edit: true, // 允许编辑
        fillForms: true, // 允许填写表单
        print: true, // 允许打印
        review: true // 允许审阅
      },
      user: {
        id: 'user1',
        name: '用户'
      },
      plugins: {
        autostart: [
          "http://180.76.177.100:10103/config.json"
        ]
      },


    },

  }
  // 编辑器应用准备就绪
  const onAppReady = () => {
    console.log('OnlyOffice 应用已准备就绪')
  }

  // 文档准备就绪
  const onDocumentReady = () => {
    console.log('文档已加载完成')
  }
  // 加载 OnlyOffice SDK
  // const script = document.createElement('script')
  // script.src = onlyOfficeUrl+'/web-apps/apps/api/documents/api.js' // 你的 DocumentServer 地址
  // script.onload = () => {
  //   docEditor = new window.DocsAPI.DocEditor('onlyoffice-editor', config)
  // }
  // document.body.appendChild(script)
  docEditor = new window.DocsAPI.DocEditor('onlyoffice-editor', config)
  window.docEditor = docEditor
  // docEditor.executeCommand("paste", ["这是插入的一段文本"]);
  setTimeout(() => {
    console.log('insertText')
    insertText()
  }, 2000)

}
const insertText = (text) => {

  const iframe = document.querySelector(".onlyoffice-container iframe");
  iframe.contentWindow.postMessage({
    type: "insertText",
    text: "这是从外部按钮插入的文本"
  }, "*");
}
onMounted(() => {
  initOnlyOffice()
})
</script>
<style scoped>
.right {
  height: -webkit-fill-available;
}
</style>
